import { DeleteModal } from '@/components/Modals';
import api from '@/pages/Organization/MenuManagement/request';
import { findTreeData, formatToTreeArr, getTreeDataKeys } from '@/utils/format';
import { createFilterColumns } from '@/utils/table';
import type { ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, Space, Typography } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import Form from './Form';

function MenuManagement() {
  const [isShowModal, setIsShowModal] = useState(false);
  const [curData, setCurData] = useState<Partial<MenuManagementApi.InfoResponse>>({});
  const [filterList] = useState<Requestor.FilterResponse[]>([]);
  const [list, setList] = useState<Requestor.TargetTree<MenuManagementApi.InfoResponse>[]>([]);

  // request
  const getAllList = async () => {
    const data = await api.getAllList();
    setList(formatToTreeArr(data));
  };

  useEffect(() => {
    getAllList();
  }, []);

  // method
  const setState = (state: boolean, data?: MenuManagementApi.InfoResponse) => {
    setCurData(data || {});
    setIsShowModal(state);
  };
  const removeRequest = async (params: MenuManagementApi.DeleteParams) => {
    const data = await api.remove(params);
    if (data.success) {
      getAllList();
      setState(false);
    }
  };
  const onConfirmRemove = () => {
    const { id = '' } = curData;
    const all = findTreeData(list, id);
    const keys = getTreeDataKeys(all);
    removeRequest(keys);
  };
  const onCancelRemove = () => {
    setState(false);
  };
  const columns = useMemo(() => {
    const filterColumns = createFilterColumns<MenuManagementApi.InfoResponse>(filterList);
    const tableColumns: ProColumns<MenuManagementApi.InfoResponse>[] = [
      {
        title: '名称',
        dataIndex: 'title',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
      },
      {
        title: '路径名称',
        dataIndex: 'linkName',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
      },
      {
        title: '路径',
        dataIndex: 'linkPath',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
      },
      {
        title: '操作',
        hideInSearch: true,
        align: 'center',
        render(_, record) {
          return (
            <Space>
              <Typography.Link>
                <Form isEdit={false} data={record} onSuccess={() => getAllList()} />
              </Typography.Link>
              <Typography.Link>
                <Form isEdit data={record} onSuccess={() => getAllList()} />
              </Typography.Link>
              <Typography.Link>
                <Button danger type="link" onClick={() => setState(true, record)}>
                  删除
                </Button>
              </Typography.Link>
            </Space>
          );
        },
      },
    ];
    return filterColumns.concat(tableColumns);
  }, [filterList]);
  return (
    <PageContainer>
      <ProTable
        bordered
        size="small"
        rowKey="id"
        headerTitle={false}
        search={false}
        options={false}
        pagination={false}
        scroll={{ x: 1200 }}
        toolBarRender={() => [
          <Button key="search" type="primary" onClick={getAllList}>
            查询
          </Button>,
          <Form key="add" isEdit={false} onSuccess={() => getAllList()} />,
        ]}
        columns={columns}
        dataSource={list}
        expandable={{ defaultExpandAllRows: true }}
      />
      <DeleteModal
        open={isShowModal}
        content="确认删除吗？"
        onOk={onConfirmRemove}
        onCancel={onCancelRemove}
      />
    </PageContainer>
  );
}

export default MenuManagement;
